<template>
    <div class="box">
        <el-tabs tab-position="left" @tab-click="handleClick">
            <el-tab-pane label="系统">
                <div class="listbox">
                    <div class="list" v-for="(it, i) in tableData" :key="i" :class="link == it.ID ? 'active' : ''"
                        @click="handClick(it, 0)">
                        <div>{{ it.name }}</div>
                    </div>
                </div>
            </el-tab-pane>
            <el-tab-pane label="普通商品">
                <div class="listbox">
                    <div class="list" v-for="(it, i) in productlist" :key="i" :class="link == it.ID ? 'active' : ''"
                        @click="handClick(it, 1)">
                        <div>{{ it.title }}</div>
                    </div>
                </div>
            </el-tab-pane>
            <el-tab-pane label="商品分区">
                <div class="listbox">
                    <div class="list" v-for="(it, i) in zoning" :key="i" :class="link == it.ID ? 'active' : ''"
                        @click="handClick(it, 2)">
                        <div>{{ it.name }}</div>
                    </div>
                </div>
            </el-tab-pane>
            <!-- <el-tab-pane label="秒杀商品">
                <div class="listbox">
                    <div class="list" v-for="(it, i) in productlist" :key="i" :class="link == it.ID ? 'active' : ''"
                        @click="handClick(it, 2)">
                        <div>{{ it.title }}</div>
                    </div>
                </div>
            </el-tab-pane>
            <el-tab-pane label="拼团商品">
                <div class="listbox">
                    <div class="list" v-for="(it, i) in productlist" :key="i" :class="link == it.ID ? 'active' : ''"
                        @click="handClick(it, 3)">
                        <div>{{ it.title }}</div>
                    </div>
                </div>
            </el-tab-pane>
            <el-tab-pane label="砍价商品">
                <div class="listbox">
                    <div class="list" v-for="(it, i) in productlist" :key="i" :class="link == it.ID ? 'active' : ''"
                        @click="handClick(it, 4)">
                        <div>{{ it.title }}</div>
                    </div>
                </div>
            </el-tab-pane> -->
            <!-- <el-tab-pane label="外部链接">
                <div class="listbox">
                    <el-form label-width="100px">
                        <el-form-item label="跳转链接">
                            <el-input v-model="url"></el-input>
                        </el-form-item>
                        <el-form-item label="">
                            <el-button type="primary" @click="handClick(url, 1)">确定</el-button>
                        </el-form-item>
                    </el-form>
                </div>
            </el-tab-pane> -->
        </el-tabs>
    </div>
</template>
<script>
export default {
    name: "RoutLink",
    props: ['link'],
    watch: {


    },

    data() {
        return {
            tableData: [
                {
                    name: '首页',
                    ID: '/pages/index/index'
                },
                {
                    name: '分类',
                    ID: '/pages/commodity/category'
                },
                {
                    name: '购物车',
                    ID: '/pages/cat/cat'
                },
                {
                    name: '个人中心',
                    ID: '/pages/personal/index'
                },
                {
                    name: '肯德基',
                    ID: '/pages/Lochig/kfc/Starbucks'
                },
                {
                    name: '麦当劳',
                    ID: '/pages/Lochig/mcd/Starbucks'
                },
                {
                    name: '辛巴克',
                    ID: '/pages/Lochig/starbucks/Starbucks'
                },
                {
                    name: '瑞辛咖啡',
                    ID: '/pages/Lochig/luckincoffee/Starbucks'
                },
                {
                    name: '库迪咖啡',
                    ID: '/pages/Lochig/cotticoffee/Starbucks'
                },
                {
                    name: '奈雪',
                    ID: '/pages/Lochig/nayuki/Starbucks'
                },
                {
                    name: '必胜客',
                    ID: '/pages/Lochig/pizzahut/Starbucks'
                },
                {
                    name: '实名认证',
                    ID: '/pages/personal/realName/realName'
                }

                // {
                //     name: '砍价商品',
                //     ID: '/pages/commodity/bargaining/list'
                // },
                // {
                //     name: '拼团商品',
                //     ID: '/pages/commodity/bargaining/groupBuying'
                // },
                // {
                //     name: '秒杀商品',
                //     ID: '/pages/commodity/seckill/seckill'
                // },
                // {
                //     name: '附近商家',
                //     ID: '/pages/vicinity/vicinity'
                // },
                //  {
                //     name: '新闻资讯',
                //     ID: '/pages/news/news'
                // }
            ],
            productlist: [],
            url: '',
            zoning: [],//商品分区

        }
    },
    mounted() {
        console.log(this.link, "选择的")
        this.getData()
    },
    methods: {
        handleClick(e) {
            if (e.index == 1) {
                this.getData()
            } else if (e.index == 2) {
                this.getzoning()
            }
        },
        handClick(e, index) {
            e.goodsType = index
            this.$emit('selpage', e)
        },
        confirm() {
            let e = {
                name: '外部链接',
                ID: this.url,
                goodsType: 5
            }
            this.$emit('selpage', e)
        },
        //获取数据
        getData() {
            this.request('admin/add_goods/', 'get', { page: 1, size: 50, partition: 0 }).then(res => {
                console.log(res)
                if (res.data) {
                    this.productlist = res.data.data
                } else {
                    this.productlist = []
                }
            })

        },
        //秒杀商品数据
        getkillData() {
            this.request('admin/killing/add_goods/', 'get', {
                page: 1, size: 50,
            }).then(res => {
                this.productlist = res.data.data
            })
        },
        //拼团商品数据
        getteamworkData() {
            this.request('admin/teamwork/add_goods/', 'get', {
                page: 1, size: 50,
            }).then(res => {
                this.productlist = res.data.data
            })
        },
        //砍价商品
        getbargainingData() {
            this.request('admin/bargaining/add_goods/', 'get', {
                page: 1, size: 50,
            }).then(res => {
                this.productlist = res.data.data
            })
        },
        //砍价商品
        getzoning() {
            this.request('admin/partition/', 'get', {
                page: 1, size: 100,
            }).then(res => {
                this.zoning = res.data.data

            })
        }
    }
};
</script>
<style scoped lang="scss">
.listbox {
    display: flex;
    flex-wrap: wrap;
    align-items: center;

    .list {
        padding: 4px 5px;
        background-color: #fff;
        border: 1px solid #ccc;
        margin: 5px 5px;
        cursor: pointer;
    }

    .list:hover {
        background: #409eff;
        color: #fff;
        border-color: #409eff;
    }

    .active {
        background: #409eff;
        color: #fff;
        border-color: #409eff;
    }
}
</style>